<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>添加权限</title>
    <link rel="stylesheet" href="/static/lib/layuiadmin/plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/static/lib/layuiadmin/css/global.css" media="all">
    <link rel="stylesheet" href="/static/lib/layuiadmin/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/lib/layuiadmin/css/table.css" />
</head>

<body>
<div class="admin-main">

    <div style="margin: 15px;">
        <form class="layui-form" method="post" id="form" >

            <div>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <a href="javascript:;" class="layui-btn layui-btn-mini layui-btn-danger delete" >删除该项</a>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title-0" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-block">
                        <textarea  name="desc-0"   placeholder="请输入描述" autocomplete="off" class="layui-textarea" ></textarea>
                    </div>
                </div>
                <hr />
            </div>

            <div id="append">

            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                    <a href="javascript:;" class="layui-btn" id="addText">继续添加</a>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">封面</label>
                <div class="layui-input-block">
                    <img src="" style="width:200px;height:200px;" id="cover-show"/>
                    <div style="margin-top: 10px;"><input type="file" name="file" class="layui-upload-file"></div>
                    <input type="hidden" value="" id="cover"  name="cover"/>
                </div>

            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">选择模板</label>
                <div class="layui-input-block">
                    <select name="tpl" >
                        <option value="imgleft">图片居左</option>
                        <option value="imgright">图片居右</option>
                        <!--<option value="imgcenter">图片居中</option>-->
                        <option value="imgback">图片背景文字居中</option>
                        <option value="imgbackleft">图片背景文字靠左</option>
                        <option value="imgbackright">图片背景文字靠右</option>
                    </select>
                </div>
            </div>



            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button lay-filter="add" lay-submit class="layui-btn">提交</button>
                </div>
            </div>
        </form>
    </div>

</div>
<script type="text/javascript" src="/static/lib/layuiadmin/plugins/layui/layui.js"></script>

<script type="text/javascript" src="/static/lib/ueditor/ueditor.config.js?v=1"></script>
<script type="text/javascript" src="/static/lib/ueditor/ueditor.all.js"></script>


<script type="text/javascript">
    layui.use('form', function(){
        var form = layui.form();
        form.on('submit(add)', function(data){
            //调用父窗口函数 把数据传去
            window.parent.addContent(data.field);
            /*layer.alert(JSON.stringify(data.field), {
             title: '最终的提交信息'
             });*/
            return false;
        });
    });
    layui.use(["layer","upload"],function(){
        var $ = layui.jquery;
        layui.upload({
            url: '/admin/upload/upload'
            ,success: function(res){
                console.log(res); //上传成功返回值，必须为json格式
                if(1 == res.code){
                    $("#cover-show").attr("src",res.data.src);
                    $("#cover").val(res.data.src);
                }else{
                    layer.msg(res.msg);
                }
            }
        });

        var textIndex = 1;
        $("#addText").click(function(){
            var $append = $("#append");
            var html = '<div>\
                            <div class="layui-form-item"> \
                                <label class="layui-form-label"></label> \
                                <div class="layui-input-block"> \
                                    <a href="javascript:;" class="layui-btn layui-btn-mini layui-btn-danger delete" >删除该项</a> \
                                </div> \
                            </div>\
                            <div class="layui-form-item"> \
                                <label class="layui-form-label">标题</label> \
                                <div class="layui-input-block"> \
                                    <input type="text" name="title-'+textIndex+'" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"> \
                                </div> \
                            </div> \
                            <div class="layui-form-item"> \
                                <label class="layui-form-label">描述</label> \
                                <div class="layui-input-block"> \
                                    <textarea  name="desc-'+textIndex+'"   placeholder="请输入描述" autocomplete="off" class="layui-textarea" ></textarea> \
                                </div> \
                            </div>\
                            <hr />\
                        </div>\
                    ';
            $append.append(html);
            textIndex++;
        });
        $("#form").delegate(".delete",'click',function(){
            $(this).parent().parent().parent().remove();
        })
    });

</script>

</body>

</html>